<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
</head>

<body>
  <div style="margin:10px;">
    <div style="margin:20px;">
      <img src="a.png" alt="" id="touchImg" style="position:absolute;">
      <!--<div style="width:100px;height:100px;border:2px solid black;position:absolute;" ></div>-->
    </div>
  </div>
</body>
<script>
  var data = {
    "width": 430,
    "height": 471,
    "touchDiv": [
      {
        "name": "div1",
        "rect": [0, 0, 100, 100]
      },
      {
        "name": "div2",
        "rect": [100, 100, 100, 100]
      }
    ]
  };

  checkTouch = function (xp, yp) {
    var list = data['touchDiv'];
    var w = data['width'];
    var h = data['height'];
    for (var i = 0; i < list.length; i++) {
      var item = list[i];
      var x = item.rect[0] / w;
      var y = item.rect[1] / h;
      var x2 = (item.rect[2] + item.rect[0]) / w;
      var y2 = (item.rect[3] + item.rect[1]) / h;

      if (xp >= x && xp <= x2 && yp >= y && yp <= y2) {
        console.log(item.name);
      }
    }
  }

  document.getElementById('touchImg').addEventListener('touchstart', function (e) {
    var touchY = e.changedTouches[0].clientY - e.target.offsetTop;
    var touchX = e.changedTouches[0].clientX - e.target.offsetLeft;
    checkTouch(touchX / e.target.width, touchY / e.target.height)
    console.log("pos : " + touchX + "," + touchY)

  }, false);

</script>

</html>